<template>
	<div>
		<el-dialog modal-class="edit_form_modal" class="edit_form" v-model="formVisible" :title="formTitle" width="80%" destroy-on-close :fullscreen='false'>
			<el-form class="formModel_form" ref="formRef" :model="form" :rules="rules">
				<el-row>
					<el-col :span="12">
						<el-form-item label="客户账号" prop="kehuzhanghao">
							<el-input class="list_inp" v-model="form.kehuzhanghao" placeholder="客户账号"
								 type="text" 								:readonly="!isAdd||disabledForm.kehuzhanghao?true:false" />
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="客户姓名" prop="kehuxingming">
							<el-input class="list_inp" v-model="form.kehuxingming" placeholder="客户姓名"
								 type="text" 								:readonly="!isAdd||disabledForm.kehuxingming?true:false" />
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="手机号码" prop="shoujihaoma">
							<el-input class="list_inp" v-model="form.shoujihaoma" placeholder="手机号码"
								 type="text" 								:readonly="!isAdd||disabledForm.shoujihaoma?true:false" />
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="客户编号" prop="kehubianhao">
							<el-input class="list_inp" v-model.number="form.kehubianhao" placeholder="客户编号"
								 type="text" 								:readonly="!isAdd||disabledForm.kehubianhao?true:false" />
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="订单编号" prop="dingdanbianhao">
							<el-input class="list_inp" v-model="form.dingdanbianhao" placeholder="订单编号"
								 type="text" 								:readonly="!isAdd||disabledForm.dingdanbianhao?true:false" />
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="数量" prop="shuliang">
							<el-input class="list_inp" v-model.number="form.shuliang" placeholder="数量"
								 type="text" 								:readonly="!isAdd||disabledForm.shuliang?true:false" />
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="布草名称" prop="bucaomingcheng">
							<el-input class="list_inp" v-model="form.bucaomingcheng" placeholder="布草名称"
								 type="text" 								:readonly="!isAdd||disabledForm.bucaomingcheng?true:false" />
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="布草品类" prop="bucaopinlei">
							<el-input class="list_inp" v-model="form.bucaopinlei" placeholder="布草品类"
								 type="text" 								:readonly="!isAdd||disabledForm.bucaopinlei?true:false" />
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="布草颜色" prop="bucaoyanse">
							<el-input class="list_inp" v-model="form.bucaoyanse" placeholder="布草颜色"
								 type="text" 								:readonly="!isAdd||disabledForm.bucaoyanse?true:false" />
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="订单类型" prop="dingdanleixing">
							<el-input class="list_inp" v-model="form.dingdanleixing" placeholder="订单类型"
								 type="text" 								:readonly="!isAdd||disabledForm.dingdanleixing?true:false" />
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="下单时间" prop="xiadanshijian">
							<el-date-picker
								class="list_date"
								v-model="form.xiadanshijian"
								format="YYYY-MM-DD HH:mm:ss"
								value-format="YYYY-MM-DD HH:mm:ss"
								type="datetime"
								:readonly="!isAdd||disabledForm.xiadanshijian?true:false"
								placeholder="请选择下单时间" />
						</el-form-item>
					</el-col>
                    <template v-if="!isAdd">
					<el-col :span="12">
						<el-form-item label="订单状态" prop="dingdanzhuangtai">
							<el-select
								class="list_sel"
								:disabled="!isAdd||disabledForm.dingdanzhuangtai?true:false"
								v-model="form.dingdanzhuangtai" 
								placeholder="请选择订单状态"
								>
								<el-option v-for="(item,index) in dingdanzhuangtaiLists" :label="item"
									:value="item"
									>
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
                    </template>
					<el-col :span="12">
						<el-form-item label="负责人账号" prop="fuzerenzhanghao">
							<el-input class="list_inp" v-model="form.fuzerenzhanghao" placeholder="负责人账号"
								 type="text" 								:readonly="!isAdd||disabledForm.fuzerenzhanghao?true:false" />
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="负责人姓名" prop="fuzerenxingming">
							<el-input class="list_inp" v-model="form.fuzerenxingming" placeholder="负责人姓名"
								 type="text" 								:readonly="!isAdd||disabledForm.fuzerenxingming?true:false" />
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="区域" prop="quyu">
							<el-input class="list_inp" v-model="form.quyu" placeholder="区域"
								 type="text" 								:readonly="!isAdd||disabledForm.quyu?true:false" />
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="班次" prop="banci">
							<el-input class="list_inp" v-model="form.banci" placeholder="班次"
								 type="text" 								:readonly="!isAdd||disabledForm.banci?true:false" />
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="开始时间" prop="kaishishijian">
							<el-date-picker
								class="list_date"
								v-model="form.kaishishijian"
								format="YYYY-MM-DD HH:mm:ss"
								value-format="YYYY-MM-DD HH:mm:ss"
								type="datetime"
								:readonly="!isAdd||disabledForm.kaishishijian?true:false"
								placeholder="请选择开始时间" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="预计完成时间" prop="yujiwanchengshijian">
							<el-date-picker
								class="list_date"
								v-model="form.yujiwanchengshijian"
								format="YYYY-MM-DD HH:mm:ss"
								value-format="YYYY-MM-DD HH:mm:ss"
								type="datetime"
								:readonly="!isAdd||disabledForm.yujiwanchengshijian?true:false"
								placeholder="请选择预计完成时间" />
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer v-if="isAdd||type=='logistics'||type=='reply'">
				<span class="formModel_btn_box">
					<el-button class="cancel_btn" @click="closeClick">取消</el-button>
					<el-button class="confirm_btn" type="primary" @click="save"
						>
						提交
					</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>
<script setup>
	import {
		reactive,
		ref,
		getCurrentInstance,
		nextTick,
		computed,
		defineEmits
	} from 'vue'
    import {
        useStore
    } from 'vuex';
    const store = useStore()
    const user = computed(()=>store.getters['user/session'])
	const context = getCurrentInstance()?.appContext.config.globalProperties;	
	const emit = defineEmits(['formModelChange'])
	//基础信息
	const tableName = 'hongganwancheng'
	const formName = '烘干完成'
	//基础信息
	//form表单
	const form = ref({})
	const disabledForm = ref({
		kehuzhanghao : false,
		kehuxingming : false,
		shoujihaoma : false,
		kehubianhao : false,
		dingdanbianhao : false,
		shuliang : false,
		bucaomingcheng : false,
		bucaopinlei : false,
		bucaoyanse : false,
		dingdanleixing : false,
		xiadanshijian : false,
		dingdanzhuangtai : false,
		fuzerenzhanghao : false,
		fuzerenxingming : false,
		quyu : false,
		banci : false,
		kaishishijian : false,
		yujiwanchengshijian : false,
	})
	const formVisible = ref(false)
	const isAdd = ref(false)
	const formTitle = ref('')
	//表单验证
	//匹配整数
	const validateIntNumber = (rule, value, callback) => {
		if (!value) {
			callback();
		} else if (!context?.$toolUtil.isIntNumer(value)) {
			callback(new Error("请输入整数"));
		} else {
			callback();
		}
	}
	//匹配数字
	const validateNumber = (rule, value, callback) => {
		if(!value){
			callback();
		} else if (!context?.$toolUtil.isNumber(value)) {
			callback(new Error("请输入数字"));
		} else {
			callback();
		}
	}
	//匹配手机号码
	const validateMobile = (rule, value, callback) => {
		if(!value){
			callback();
		} else if (!context?.$toolUtil.isMobile(value)) {
			callback(new Error("请输入正确的手机号码"));
		} else {
			callback();
		}
	}
	//匹配电话号码
	const validatePhone = (rule, value, callback) => {
		if(!value){
			callback();
		} else if (!context?.$toolUtil.isPhone(value)) {
			callback(new Error("请输入正确的电话号码"));
		} else {
			callback();
		}
	}
	//匹配邮箱
	const validateEmail = (rule, value, callback) => {
		if(!value){
			callback();
		} else if (!context?.$toolUtil.isEmail(value)) {
			callback(new Error("请输入正确的邮箱地址"));
		} else {
			callback();
		}
	}
	//匹配身份证
	const validateIdCard = (rule, value, callback) => {
		if(!value){
			callback();
		} else if (!context?.$toolUtil.checkIdCard(value)) {
			callback(new Error("请输入正确的身份证号码"));
		} else {
			callback();
		}
	}
	//匹配网站地址
	const validateUrl = (rule, value, callback) => {
		if(!value){
			callback();
		} else if (!context?.$toolUtil.isURL(value)) {
			callback(new Error("请输入正确的URL地址"));
		} else {
			callback();
		}
	}
	const rules = ref({
		kehuzhanghao: [
		],
		kehuxingming: [
		],
		shoujihaoma: [
			{ validator: validateMobile, trigger: 'blur' },
		],
		kehubianhao: [
			{ validator: validateIntNumber, trigger: 'blur' },
		],
		dingdanbianhao: [
		],
		shuliang: [
			{ validator: validateIntNumber, trigger: 'blur' },
		],
		bucaomingcheng: [
		],
		bucaopinlei: [
		],
		bucaoyanse: [
		],
		dingdanleixing: [
		],
		xiadanshijian: [
		],
		dingdanzhuangtai: [
		],
		fuzerenzhanghao: [
		],
		fuzerenxingming: [
		],
		quyu: [
		],
		banci: [
		],
		kaishishijian: [
		],
		yujiwanchengshijian: [
		],
	})
	//表单验证
	
	const formRef = ref(null)
	const id = ref(0)
	const type = ref('')
	//订单状态列表
	const dingdanzhuangtaiLists = ref([])
	//methods

	//获取唯一标识
	const getUUID =()=> {
      return new Date().getTime();
    }
	//重置
	const resetForm = () => {
		form.value = {
			kehuzhanghao: '',
			kehuxingming: '',
			shoujihaoma: '',
			kehubianhao: '',
			dingdanbianhao: '',
			shuliang: '',
			bucaomingcheng: '',
			bucaopinlei: '',
			bucaoyanse: '',
			dingdanleixing: '',
			xiadanshijian: '',
			dingdanzhuangtai: '待消毒',
			fuzerenzhanghao: '',
			fuzerenxingming: '',
			quyu: '',
			banci: '',
			kaishishijian: '',
			yujiwanchengshijian: '',
		}
	}
	//获取info
	const getInfo = ()=>{
		context?.$http({
			url: `${tableName}/info/${id.value}`,
			method: 'get'
		}).then(res => {
			let reg=new RegExp('../../../file','g')
			form.value = res.data.data
			formVisible.value = true
		})
	}
	const crossRow = ref('')
	const crossTable = ref('')
	const crossTips = ref('')
	const crossColumnName = ref('')
	const crossColumnValue = ref('')
	//初始化
	const init=(formId=null,formType='add',formNames='',row=null,table=null,statusColumnName=null,tips=null,statusColumnValue=null)=>{
		resetForm()
			form.value.xiadanshijian = context?.$toolUtil.getCurDateTime()
			form.value.kaishishijian = context?.$toolUtil.getCurDateTime()
			form.value.yujiwanchengshijian = context?.$toolUtil.getCurDateTime()
		if(formId){
			id.value = formId
			type.value = formType
		}
		if(formType == 'add'){
			isAdd.value = true
			formTitle.value = '新增' + formName
			formVisible.value = true
		}else if(formType == 'info'){
			isAdd.value = false
			formTitle.value = '查看' + formName
			getInfo()
		}else if(formType == 'edit'){
			isAdd.value = true
			formTitle.value = '修改' + formName
			getInfo()
		}
		else if(formType == 'cross'){
			isAdd.value = true
			formTitle.value = formNames
			// getInfo()
			for(let x in row){
				if(x=='kehuzhanghao'){
					form.value.kehuzhanghao = row[x];
					disabledForm.value.kehuzhanghao = true;
					continue;
				}
				if(x=='kehuxingming'){
					form.value.kehuxingming = row[x];
					disabledForm.value.kehuxingming = true;
					continue;
				}
				if(x=='shoujihaoma'){
					form.value.shoujihaoma = row[x];
					disabledForm.value.shoujihaoma = true;
					continue;
				}
				if(x=='kehubianhao'){
					form.value.kehubianhao = row[x];
					disabledForm.value.kehubianhao = true;
					continue;
				}
				if(x=='dingdanbianhao'){
					form.value.dingdanbianhao = row[x];
					disabledForm.value.dingdanbianhao = true;
					continue;
				}
				if(x=='shuliang'){
					form.value.shuliang = row[x];
					disabledForm.value.shuliang = true;
					continue;
				}
				if(x=='bucaomingcheng'){
					form.value.bucaomingcheng = row[x];
					disabledForm.value.bucaomingcheng = true;
					continue;
				}
				if(x=='bucaopinlei'){
					form.value.bucaopinlei = row[x];
					disabledForm.value.bucaopinlei = true;
					continue;
				}
				if(x=='bucaoyanse'){
					form.value.bucaoyanse = row[x];
					disabledForm.value.bucaoyanse = true;
					continue;
				}
				if(x=='dingdanleixing'){
					form.value.dingdanleixing = row[x];
					disabledForm.value.dingdanleixing = true;
					continue;
				}
				if(x=='xiadanshijian'){
					form.value.xiadanshijian = row[x];
					disabledForm.value.xiadanshijian = true;
					continue;
				}
				if(x=='dingdanzhuangtai'){
					form.value.dingdanzhuangtai = row[x];
					disabledForm.value.dingdanzhuangtai = true;
					continue;
				}
				if(x=='fuzerenzhanghao'){
					form.value.fuzerenzhanghao = row[x];
					disabledForm.value.fuzerenzhanghao = true;
					continue;
				}
				if(x=='fuzerenxingming'){
					form.value.fuzerenxingming = row[x];
					disabledForm.value.fuzerenxingming = true;
					continue;
				}
				if(x=='quyu'){
					form.value.quyu = row[x];
					disabledForm.value.quyu = true;
					continue;
				}
				if(x=='banci'){
					form.value.banci = row[x];
					disabledForm.value.banci = true;
					continue;
				}
				if(x=='kaishishijian'){
					form.value.kaishishijian = row[x];
					disabledForm.value.kaishishijian = true;
					continue;
				}
				if(x=='yujiwanchengshijian'){
					form.value.yujiwanchengshijian = row[x];
					disabledForm.value.yujiwanchengshijian = true;
					continue;
				}
			}
			if(row){
				crossRow.value = row
			}
			if(table){
				crossTable.value = table
			}
			if(tips){
				crossTips.value = tips
			}
			if(statusColumnName){
				crossColumnName.value = statusColumnName
			}
			if(statusColumnValue){
				crossColumnValue.value = statusColumnValue
			}
			form.value.dingdanzhuangtai='待消毒'
			formVisible.value = true
		}

		context?.$http({
			url: `${context?.$toolUtil.storageGet('sessionTable')}/session`,
			method: 'get'
		}).then(res => {
			var json = res.data.data
			if(json.hasOwnProperty('kehuzhanghao')&& context?.$toolUtil.storageGet("role")!="管理员"){
				form.value.kehuzhanghao = json.kehuzhanghao
				disabledForm.value.kehuzhanghao = true;
			}
			if(json.hasOwnProperty('kehuxingming')&& context?.$toolUtil.storageGet("role")!="管理员"){
				form.value.kehuxingming = json.kehuxingming
				disabledForm.value.kehuxingming = true;
			}
			if(json.hasOwnProperty('shoujihaoma')&& context?.$toolUtil.storageGet("role")!="管理员"){
				form.value.shoujihaoma = json.shoujihaoma
				disabledForm.value.shoujihaoma = true;
			}
			if(context?.$toolUtil.storageGet("role")!="管理员" && !context?.$toolUtil.storageGet("isAdmin")) {
				disabledForm.value.dingdanzhuangtai = true;
			}
		})
		dingdanzhuangtaiLists.value = "已消毒,待消毒".split(',')
	}
	//初始化
	//声明父级调用
	defineExpose({
		init
	})
	//关闭
	const closeClick = () => {
		formVisible.value = false
	}
	//富文本
	const editorChange = (e,name) =>{
		form.value[name] = e
	}
	//提交
	const save= async ()=>{
		var table = crossTable.value
		var objcross = JSON.parse(JSON.stringify(crossRow.value))
		let crossUserId = ''
		let crossRefId = ''
		let crossOptNum = ''
		if(type.value == 'cross'){
			if(crossColumnName.value!=''){
				if(!crossColumnName.value.startsWith('[')){
					for(let o in objcross){
						if(o == crossColumnName.value){
							objcross[o] = crossColumnValue.value
						}
					}
					//修改跨表数据
					changeCrossData(objcross)
				}else{
					crossUserId = user.value.id
					crossRefId = objcross['id']
					crossOptNum = crossColumnName.value.replace(/\[/,"").replace(/\]/,"")
				}
			}
		}
		formRef.value.validate((valid)=>{
			if(valid){
				if(crossUserId&&crossRefId){
					form.value.crossuserid = crossUserId
					form.value.crossrefid = crossRefId
					let params = {
						page: 1,
						limit: 1000, 
						crossuserid:form.value.crossuserid,
						crossrefid:form.value.crossrefid,
					}
					context?.$http({
						url: `${tableName}/page`,
						method: 'get', 
						params: params 
					}).then(res=>{
						if(res.data.data.total>=crossOptNum){
							context?.$toolUtil.message(`${crossTips.value}`,'error')
							return false
						}else{
							context?.$http({
								url: `${tableName}/${!form.value.id ? "save" : "update"}`,
								method: 'post', 
								data: form.value 
							}).then(async res=>{
								emit('formModelChange')
								context?.$toolUtil.message(`操作成功`,'success')
                                formVisible.value = false
							})
						}
					})
				}else{
					context?.$http({
						url: `${tableName}/${!form.value.id ? "save" : "update"}`,
						method: 'post', 
						data: form.value 
					}).then(async (res)=>{
						emit('formModelChange')
						context?.$toolUtil.message(`操作成功`,'success')
                        formVisible.value = false
					})
				}
			}
		})
	}
	//修改跨表数据
	const changeCrossData = async (row)=>{
		await context?.$http({
			url: `${crossTable.value}/update`,
			method: 'post',
			data: row
		}).then(res=>{})
	}
</script>
<style lang="scss" scoped>
	// 表单
	.formModel_form{
		// form item
		:deep(.el-form-item) {
			//label
			.el-form-item__label {
			}
			// 内容盒子
			.el-form-item__content {
				// 输入框
				.list_inp {
				}
				//日期选择器
				.list_date {
				}
				// 下拉框
				.list_sel {
					//去掉默认样式
					.select-trigger{
						height: 100%;
						.el-input{
							height: 100%;
						}
					}
				}
			}
		}
	}
	// 按钮盒子
	.formModel_btn_box {
		.cancel_btn {
		}
		.cancel_btn:hover {
		}
		
		.confirm_btn {
		}
		.confirm_btn:hover {
		}
	}
</style>
